<script setup>
//HeaderCom组件
// 展示日历头部的组件 包括 假期 年 月 日 等信息

//MainCom组件
// 展示日历主体的组件 主要包括 42个日期格子 

//FooterCom组件
// 展示日历底部的组件 包括 今天具体信息
import HeaderCom from './components/HeaderCom.vue'
import MainCom from './components/MainCom.vue'
import FooterCom from './components/FooterCom.vue'
</script>

<template>
  <div class="container">
    <HeaderCom />
    <MainCom />
    <FooterCom />
  </div>
</template>

<style>
:root{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.container{
  position: relative;
  width: 560px;
  margin: 16px;
  border-radius: 16px;
  box-shadow: 0 0 10px #4f4c4c;
}
</style>